import React from 'react';
import ReactMarkdown from 'react-markdown';
import { Alert } from 'antd';
import Params from './Params';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { parse, getDescription, getDeprecatedInfo } from '../utils/reactComponentInfoUtils.js';

/**
 * 组件信息展示组件
 * @returns {JSX.Element} 渲染的React元素
 */
export default function ComponentInfo() {
  const { componentKey } = useParams();
  const raw = useSelector(state =>
    state.componentInfos.components.find(info => info.key === encodeURIComponent(componentKey))
  );

  if (!raw) {
    return <div>Component not found</div>;
  }
  // 转对象
  const component = parse(raw);
  const deprecatedInfo = getDeprecatedInfo(component.jsDoc);
  return (
    <div className="component-info">
      <h2>{component.name}</h2>
      {deprecatedInfo && (
        <Alert
          message="该组件已弃用"
          description={deprecatedInfo}
          type="warning"
          showIcon
        />
      )}
      <ReactMarkdown>{getDescription(component.jsDoc)}</ReactMarkdown>
      <Params component={component} />
    </div>
  );
}